﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>福建省食品药品监督管理局后台管理</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrom=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="福建省食品药品监督管理局后台管理" />
    <meta name="keywords" content="后台管理，福建省食品药品监督管理局，福建省食药监督局，福建省市场监督管理局" />
    <meta name="author" content="mmcai" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <link href="../assets/css/style.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="js/BsIE/html5shiv.js"></script>
    <script src="js/BsIE/respond.js"></script>
    <![endif]-->
</head>
<body>
    <div class="page-wraper">
        <h3 class="page-title">demo样式</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="#">首页</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li class="active"> demo样式</li>
            </ul>
        </div>

        <div class="page-filter">
            <div class="form-inline">
                <div class="form-group form-select">
                    <span>地址：</span>
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                    <select class="select">
                        <option selected="selected">区域选择</option>
                        <option>北京区域</option>
                        <option>浙江区域</option>
                        <option>南京区域</option>
                        <option>厦门区域</option>
                    </select>
                </div>
                <div class="form-group form-datetime">
                    <div class="startTime input-time">
                        <input type="text" class="input mini" placeholder="开始时间">
                        <i class="fa fa-calendar"></i>
                    </div>
                    <label class="text-join">到</label>
                    <div class="endTime input-time">
                        <input type="text" class="input mini" placeholder="结束时间">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="input" placeholder="这里写什么东西">
                </div>
                <div class="form-group">
                    <input type="text" class="input" placeholder="这里写好东西">
                </div>
            </div>
            <div class="btn-bar">
                <button class="btn btn-primary" type="submit">搜索</button>
            </div>
        </div>

        <div class="page-table">
            <div class="table-option">

                <div class="pull-left btn-group">
                    <div class="btn mui-dropdown">
                        <input type="checkbox" class="" />
                        <i class="fa fa-angle-down dropdown-toggle"></i>
                        <ul class="dropdown-menu dropdown-left">
                            <li>
                                <a href="javascript:void(0);" title="全选">
                                    全选
                                </a>
                            </li>
                            <li>
                                <a href="javascript:void(0);" title="反选">
                                    全选
                                </a>
                            </li>
                        </ul>
                    </div>
                    <input type="button" class="btn btn-del" value="删除" />
                    <input type="button" class="btn" value="操作" />
                    <input type="button" class="btn" value="全选" />
                </div>
                <a href="#" class="pull-right btn btn-default">新增</a>
            </div>

            <table class="table table-check tablemvc" data-src="/assets/js/Model/dataTable.js">
                <thead>
                    <tr>
                        <th class="mui-chk">
                            <input type="checkbox" id="checkAll">
                        </th>
                        <th>姓名</th>
                        <th>邮件地址</th>
                        <th>手机号码</th>
                        <th>所在分组</th>
                        <th>其它</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>

        </div>

        <div class="page-pagination">

        </div>

        <div class="page-form" hidden>

            <table class="table table-chk" hidden>
                <thead>
                    <tr>
                        <th class="mui-chk">
                            <input type="checkbox" id="chkAll" />
                        </th>
                        <th>姓名</th>
                        <th>邮件地址</th>
                        <th>手机号码</th>
                        <th>所在分组</th>
                        <th>其它</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" class="checkbox" />
                        </td>
                        <td>1009364337</td>
                        <td>1009364337@qq.com</td>
                        <td>17096358236</td>
                        <td>寂寞组</td>
                        <td>
                            <div class="mui-link-group">
                                <a href="javascript:void(0);" class="mui-link mui-edit" title="修改">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="checkbox" />
                        </td>
                        <td>1009364337</td>
                        <td>1009364337@qq.com</td>
                        <td>17096358236</td>
                        <td>寂寞组</td>
                        <td>
                            <div class="mui-link-group">
                                <a href="javascript:void(0);" class="mui-link mui-edit" title="修改">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="checkbox" />
                        </td>
                        <td>1009364337</td>
                        <td>1009364337@qq.com</td>
                        <td>17096358236</td>
                        <td>寂寞组</td>
                        <td>
                            <div class="mui-link-group">
                                <a href="javascript:void(0);" class="mui-link mui-edit" title="修改">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" class="checkbox" />
                        </td>
                        <td>1009364337</td>
                        <td>1009364337@qq.com</td>
                        <td>17096358236</td>
                        <td>寂寞组</td>
                        <td>
                            <div class="mui-link-group">
                                <a href="javascript:void(0);" class="mui-link mui-edit" title="修改">
                                    <i class="fa fa-pencil"></i>
                                </a>
                                <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
            </table>
            <div class="form">
                <div class="controls-group">
                    <label class="controls-lab" for="num">编号：</label>
                    <div class="controls">
                        <input type="text" id="num" name="num" class="input">
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="category">类别：</label>
                    <div class="controls">
                        <select id="category" name="category">
                            <option>公司新闻</option>
                            <option>行业新闻</option>
                            <option>行业动态</option>
                            <option>公司新闻</option>
                        </select>
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="title">标题：</label>
                    <div class="controls col-2">
                        <input type="text" id="title" name="title" class="input">
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="myEditor">内容：</label>
                    <div class="controls">
                        <script type="text/plain" style="width: 725px" id="myEditor" name="myEditor">
                            <p>这里我可以写一些输入提示</p>
                        </script>
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="imgs">滚动图片：</label>
                    <div class="controls">
                        <input type="text" class="input" id="imgs" name="imgs">
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="source">新闻来源：</label>
                    <div class="controls">
                        <input type="text" class="input" id="sources" name="source">
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="datetime">发布日期：</label>
                    <div class="controls">
                        <input type="text" class="input" id="datetime" name="datetime">
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab" for="checkflag">审核状态：</label>
                    <div class="controls">
                        <select id="checkflag" name="checkflag">
                            <option>审核通过</option>
                            <option>审核不通过</option>
                        </select>
                    </div>
                </div>
                <div class="controls-group">
                    <label class="controls-lab"></label>
                    <div class="controls-btn">
                        <input type="submit" id="submit" name="submit" class="btn btn-primary" value="保存">
                        <input type="button" class="btn" value="取消">
                    </div>
                </div>
                <div>
                    <ul class="errMsg"></ul>
                </div>
            </div>
        </div>

        <div class="returnback" id="returnTop">
            <a href="javascript:void(0);">
                <i class="fa fa-arrow-up"></i>
            </a>
        </div>

        <div class="load-panel">
            <img src="../assets/imgs/loading.gif" />正在加载数据...
        </div>

        <div class="panel panel-success">
            <div class="panel-heading">
                <div class="panel-title">测试页代码</div>
            </div>
            <div class="panel-body">
                <pre>
<code data-language="html">//测试页代码说明
搜索过滤部分，带标签label的下拉框
<div class="page-filter">
    <div class="form-inline">
        <div class="form-group form-select">
            这里放带标签的下拉框
        </div>
        <div class="form-group form-datetime">
            这里放带开始和结束时间的时间选择
        </div>
        <div class="form-group">
            这里放简单的文本输入框
        </div>
    </div>
    <div class="btn-bar">
        <button class="btn btn-primary" type="submit">搜索</button>
    </div>
</div>

表格头部的操作按钮栏代码如下：
<div class="page-table">
    //表格头部的操作按钮 pull-left在最左边，pull-right在最右边
    <div class="table-option">
        <div class="pull-left btn-group">
            <div class="btn mui-dropdown">
                <input type="checkbox" class="" />
                <i class="fa fa-angle-down dropdown-toggle"></i>
                <ul class="dropdown-menu dropdown-left">
                    <li>
                        <a href="javascript:void(0);" title="全选">全选</a>
                   </li>
                    <li>
                        <a href="javascript:void(0);" title="反选">全选</a>
                    </li>
                 </ul>
             </div>
            <input type="button" class="btn btn-del" value="删除" />
            <input type="button" class="btn" value="操作" />
            <input type="button" class="btn" value="全选" />
        </div>
        <a href="#" class="pull-right btn btn-default">新增</a>
    </div>

    //下面就是表格内容了，表格主要内容通过ajax请求数据，然后使用模板解析显示，所以在页面上只需要写如下代码就可以了
    <table class="table table-checks tablemvcs" data-src="/assets/js/Model/dataTables.js"> //这段代码当中tablemvc类名必不可少，data-src是表格数据的接口地址
        <thead>
            <tr>
                <th class="mui-chk">
                    <input type="checkbox" id="checkAll">
                </th>
                <th>姓名</th>
                <th>邮件地址</th>
                <th>手机号码</th>
                <th>所在分组</th>
                <th>其它</th>
                </tr>
        </thead>
        <tbody>

        </tbody>
</table>
关于表格显示，用户需要自定义表格头部和表格内容模板，表格头部如上面的<thead></thead>标签当中的内容
表格内容模板如下定义：
<script type="text/x-handlebars-template" id="table-templates">
    {{#each data}}
        <tr>
            <td>
                <input type="checkbox" class="checkbox">
             </td>
            <td>{{name}}</td>
            <td><a href="http://www.baidu.com/" target="_self">{{email}}</a></td>
            <td>{{tel}}</td>
            <td>{{group}}</td>
            <td>
                <div class="mui-link-group">
                    <a href="form-base.html" class="mui-link mui-edit" title="修改">
                        <i class="fa fa-pencil"></i>
                    </a>
                    <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                        <i class="fa fa-trash-o"></i>
                    </a>
                 </div>
             </td>
        </tr>
    {{/each}}
</script>
如何显示，需要用户自定义模板

id="关于分页"
使用者只需要写下如下代码，分页内容会根据接口返回过来的数据自动生成
<div class="page-paginations"></div>
</div>
</code>
</pre>
                <pre>
<code data-language="js">//接口返回的数据格式如下：
    [{
    pageNum: "70",
    pageIndex: "8",
    number: "10",
    totalNumber: "990",
    data: {
        data: [{
            "name": "小明1",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明2",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明3",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
 {
     "name": "小明2",
     "email": "wujunq@itouch.com.cn",
     "tel": "186-6950-7231",
     "group": "新产品组",
     "other": "喜欢漫画"
 },
        {
            "name": "小明3",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
 {
     "name": "小明2",
     "email": "wujunq@itouch.com.cn",
     "tel": "186-6950-7231",
     "group": "新产品组",
     "other": "喜欢漫画"
 },
        {
            "name": "小明3",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
         {
             "name": "小明2",
             "email": "wujunq@itouch.com.cn",
             "tel": "186-6950-7231",
             "group": "新产品组",
             "other": "喜欢漫画"
         },
         {
             "name": "小明4",
             "email": "wujunq@itouch.com.cn",
             "tel": "186-6950-7231",
             "group": "新产品组",
             "other": "喜欢漫画"
         },
        {
            "name": "小明5",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明6",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明7",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明8",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明9",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        },
        {
            "name": "小明10",
            "email": "wujunq@itouch.com.cn",
            "tel": "186-6950-7231",
            "group": "新产品组",
            "other": "喜欢漫画"
        }]
    }
}
]
</code>
</pre>
            </div>
        </div>

    </div>

    <!--JS代码-->
    <script src="../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../assets/js/plugins/handlebars-v1.3.0.js"></script>
    <script src="../assets/js/plugins/jquery.mui.js"></script>
    <script type="text/x-handlebars-template" id="table-template">
        {{#each data}}
        <tr>
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>{{name}}</td>
            <td><a href="http://www.baidu.com/" target="_self">{{email}}</a></td>
            <td>{{tel}}</td>
            <td>{{group}}</td>
            <td>
                <div class="mui-link-group">
                    <a href="form-base.html" class="mui-link mui-edit" title="修改">
                        <i class="fa fa-pencil"></i>
                    </a>
                    <a href="javascript:void(0);" class="mui-link mui-del" title="删除">
                        <i class="fa fa-trash-o"></i>
                    </a>
                </div>
            </td>
        </tr>
        {{/each}}
    </script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
